<template>
  <div class="index-page">
    <mu-appbar
            color="primary"
            class="header"
            :z-depth="0"
            v-if="$route.meta.header !== false"
    >
      <mu-button small icon slot="left" v-if="$route.meta.isBark" @click="$router.go(-1)">
        <mu-icon value=":iconfont icon-xiazai6"></mu-icon>
      </mu-button>
      {{$route.meta.title || pageTitle}}
      <mu-button small icon slot="right" v-if="$route.meta.isBark">
      </mu-button>
    </mu-appbar>
    <router-view></router-view>
    <footer class="footer" v-if="$route.meta.footer !== false">
    <!-- <span class="call" @click="answer">接听</span>
    <span class="call" @click="hangUp">挂断</span>
    <span class="call" @click="reject">拒绝</span> -->
    <div class="footer-wrap">
      <div class="item-box"
            @click="go(item.path, index)"
            v-for="(item, index) in items"
            :key="index"
            :class="$route.path === '/'+$route.params.APPID+item.path ? 'active': ''"
      >
        <i class="iconfont" :class="item.icon"></i>
        <p class="item-name">{{item.text}}</p>
      </div>
    </div>
    </footer>
    <call-tel v-if="isCall"></call-tel>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import CallTel from '../call';
export default {
  data () {
    return {
      history: window.history,
      ConversationClient: null,
      items: [
        {
          text: '电话',
          icon: 'icon-phone-channel',
          path: '/record'
        },
        {
          text: '联系人',
          icon: 'icon-weibozhiye-renwubangdianjitai',
          path: '/contact'
        },
        {
          text: '我',
          icon: 'icon-wodedangxuan',
          path: '/mine'
        }
      ]
    };
  },
  created() {
    // this.$api.app.getRecordsId({ uuid: 'f2b36818834009748ae9283402a2a902' }).then(res => {
    //   console.log(res);
    // });
    // this.$store.dispatch('getRecordsList', this.$route.query.msisdn);
  },
  computed: {
    ...mapGetters([
      'isCall',
      'pageTitle'
    ])
  },
  components: {
    CallTel
  },
  methods: {
    go (path, index) {
      this.$router.push('/' + this.$route.params.APPID + path);
      this.active = index;
    }
  }
};
</script>
<style lang="less" scoped>
 .call{
   padding: 0 10px;
 }
  .index-page{
    .header{
      text-align: center;
      position: sticky;
      top: 0;
    }
    .footer{
      height: 56px;
      color: rgba(0, 0, 0, 0.54);
      .footer-wrap{
        box-shadow: 0 -1px 0 0 #f5f5f5;
        display: flex;
        background: #fff;
        height: 56px;
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
      }
      .item-box{
        flex: 1 1 auto;
        text-align: center;
        &.active{
          color: var(--primary-color);
        }
        .iconfont{
          font-size: 20px;
          display: block;
        }
      }
    }
  }
</style>
<style lang="less">
  .index-page{
    .footer{
      .iconfont{
        font-size: 16px;
      }
      .mu-bottom-item-active{
        .iconfont{
          font-size: 18px;
        }
      }
    }
  }
</style>
